<template>
    <div class="flex-col page">
      <div class="flex-row justify-between section">
        <div class="flex-col items-start space-y-8 group_4">
          <span class="text_3">So Ask</span>
          <span class="text_8">Questionnaire management system</span>
        </div>
        <div class="flex-row space-x-71">
          <div class="flex-row section_2">
            <div class="flex-col items-center section_3">
              <div class="flex-col group_5">
                <div class="section_4"></div>
                <img
                  class="image_3"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389159184258421.png"
                />
              </div>
              <span class="text_4">3</span>
            </div>
            <span class="font_2 text_5">辽宁</span>
            <span class="font_2 text_6">沈阳</span>
          </div>
          <div class="flex-row">
            <div class="flex-col items-center group view_2">
              <img
                class="image_2"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/67fee6daf0ab01f7ffabe00e130dab33.png"
              />
              <div class="flex-col items-center text-wrapper_2"><span class="font_1">12</span></div>
            </div>
            <div class="flex-col items-start group_2">
              <img
                class="image_2"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/8e3026c1c38e8f4fa4cd660dd3022081.png"
              />
              <div class="flex-col items-center text-wrapper_2"><span class="font_1">5.</span></div>
            </div>
            <div class="flex-col items-end space-y-13 group_3">
              <span class="text_2">你好，富兰克林</span>
              <span class="text_7">超级管理员</span>
            </div>
            <img
              class="image"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735526592466204.png"
            />
            <div class="flex-col items-center group view">
              <img
                class="image_2"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/0d74c17a925b568cb85779636604477e.png"
              />
              <div class="flex-col items-center text-wrapper"><span class="font_1 text">!</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-row">
        <div class="flex-col space-y-560 section_5">
          <div class="flex-col">
            <div class="flex-row section_6">
              <img
                class="image_4"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735526622543471.png"
              />
              <span class="font_4 text_12">计费信息</span>
            </div>
            <div class="flex-row section_12">
              <img
                class="image_10"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735526650162389.png"
              />
              <span class="font_4 text_18">用户管理</span>
            </div>
          </div>
          <span class="font_4 text_36">
            <br />
            ©2022版权所有
          </span>
        </div>
        <div class="flex-col group_6">
          <div class="flex-row justify-between group_7">
            <span class="font_3 text_9 text_10">租户总数</span>
            <span class="font_3 text_9 text_11">用户总数</span>
            <span class="font_3 text_9 text_13">总销售额</span>
            <span class="font_3 text_9 text_14">问卷数量</span>
          </div>
          <div class="flex-col group_8">
            <div class="flex-row group_9">
              <div class="flex-col space-y-12 section_7">
                <div class="flex-row justify-between">
                  <span class="font_5">{{tenantAmount}}</span>
                  <img
                    class="image_5"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/bd63cf48168f9bd62d300ff2cca6ac1f.png"
                  />
                </div>
                <span class="font_7 text_20">比昨天高8.5%</span>
                <img
                  class="image_11"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735526734932244.png"
                />
              </div>
              <div class="flex-col space-y-11 section_8">
                <div class="flex-row justify-between group_10">
                  <span class="font_6">{{userAmount}}</span>
                  <img
                    class="image_6"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/5015ce102caa6ee6430126584e0beed4.png"
                  />
                </div>
                <span class="font_7 text_19">比上周高1.3%</span>
                <img
                  class="image_11"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735538416198429.png"
                />
              </div>
              <div class="flex-col space-y-12 section_9">
                <div class="flex-row space-x-6">
                  <div class="flex-col space-y-38 group_11">
                    <span class="font_5 text_15">{{salesAmount}}</span>
                    <span class="font_3 text_21">比昨天低4.3%</span>
                  </div>
                  <img
                    class="image_7"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/9c23ab5a4380177ac2dccac05bccf808.png"
                  />
                </div>
                <img
                  class="image_11"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735526742165134.png"
                />
              </div>
              <div class="flex-col space-y-12 section_10">
                <div class="flex-row justify-between">
                  <span class="font_6 text_16">{{questionnaireAmount}}</span>
                  <img
                    class="image_8"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/8dd51f1f5a366d0c37a5a70dc85560a3.png"
                  />
                </div>
                <span class="font_7 text_22">比昨天高1.8%</span>
                <img
                  class="image_11"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735533837583278.png"
                />
              </div>
              <div class="flex-row section_11">
                <img
                  class="image_9"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735536059236241.png"
                />
                <span class="text_17">搜索...</span>
              </div>
              <div class="flex-col group_12">
                <div class="flex-row justify-between section_14">
                  <div class="flex-row">
                    <div class="flex-row space-x-12">
                      <span class="font_9">租户名</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389147603939027.png"
                      />
                    </div>
                    <div class="flex-row space-x-10 group_14">
                      <span class="font_9">用户数</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389147603939027.png"
                      />
                    </div>
                    <div class="flex-row space-x-18 group_15">
                      <span class="font_9 text_24">群组数</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389149569640973.png"
                      />
                    </div>
                  </div>
                  <div class="flex-row">
                    <div class="flex-row space-x-12">
                      <span class="font_9">答卷数</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389149569640973.png"
                      />
                    </div>
                    <div class="flex-row space-x-10 group_16">
                      <span class="font_9">总余额</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389149569640973.png"
                      />
                    </div>
                    <div class="flex-row space-x-14 group_17">
                      <span class="font_9">总费用</span>
                      <img
                        class="image_14"
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389149569640973.png"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex-col items-center text-wrapper_3"><span class="font_8">导出计费数据</span></div>
                <div class="flex-col section_13">
                  <div class="flex-row justify-center group_13">
                    <img
                      class="image_12"
                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389142777747478.png"
                    />
                    <span class="font_8">下载PDF</span>
                  </div>
                  <div class="flex-row space-x-18">
                    <img
                      class="image_13"
                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678735536343011949.png"
                    />
                    <span class="font_8 text_23">下载EXCEL</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-row justify-between section_15">
              <div class="flex-row space-x-161">
                <span class="font_12 text_25">#ADS01231</span>
                <span class="font_12 text_26">123</span>
                <span class="font_10">$4,521.21</span>
              </div>
              <div class="flex-row space-x-168">
                <span class="font_10">$5,415.51</span>
                <div class="flex-row space-x-134 group_18">
                  <span class="font_10">$245,173.02</span>
                  <span class="font_11">$67,234.66</span>
                </div>
              </div>
            </div>
            <div class="flex-row justify-between section_16">
              <div class="flex-row space-x-159">
                <span class="font_12 text_27">#ADS01221</span>
                <span class="font_12 text_28">985</span>
                <span class="font_10">$5,123.66</span>
              </div>
              <div class="flex-row space-x-163">
                <span class="font_10">$2,515.55</span>
                <div class="flex-row space-x-130 group_19">
                  <span class="font_10">$662,235.22</span>
                  <span class="font_11">$212,552.22</span>
                </div>
              </div>
            </div>
            <div class="flex-row justify-between section_17">
              <div class="flex-row">
                <span class="font_12 text_29">#ADS01445</span>
                <span class="font_12 text_31">211</span>
                <span class="font_10 text_30">$2,515.55</span>
              </div>
              <div class="flex-row space-x-167">
                <span class="font_10">$5,415.51</span>
                <div class="flex-row space-x-134 group_20">
                  <span class="font_10">$245,173.02</span>
                  <span class="font_11">$67,234.66</span>
                </div>
              </div>
            </div>
            <div class="flex-row justify-between section_18">
              <div class="flex-row space-x-159">
                <span class="font_12 text_32">#ADS01251</span>
                <span class="font_12 text_33">336</span>
                <span class="font_10">$6,235.33</span>
              </div>
              <div class="flex-row space-x-164">
                <span class="font_10">$2,412.55</span>
                <div class="flex-row space-x-134 group_21">
                  <span class="font_10">$245,173.02</span>
                  <span class="font_11">$67,234.66</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-row justify-between section_19">
            <div class="flex-row space-x-153">
              <span class="font_12 text_34">#ADS01551</span>
              <span class="font_12 text_35">2020</span>
              <span class="font_10">$4,521.21</span>
            </div>
            <div class="flex-row space-x-167">
              <span class="font_10">$5,415.51</span>
              <div class="flex-row space-x-134 group_22">
                <span class="font_10">$245,173.02</span>
                <span class="font_11">$67,234.66</span>
              </div>
            </div>
          </div>
          <div class="flex-row justify-between group_23">
            <span class="font_10 text_38">显示160个数据中的10个</span>
            <div class="flex-row space-x-17">
              <div class="flex-row section_20">
                <img
                  class="image_15"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389158457937907.png"
                />
                <span class="font_9 text_37">前一页</span>
              </div>
              <div class="flex-row section_21">
                <span class="font_13 text_40">1</span>
                <span class="font_13 text_41">2</span>
                <div class="flex-col items-center text-wrapper_4"><span class="font_13 text_42">3</span></div>
                <span class="font_13 text_43">4</span>
              </div>
              <div class="flex-row section_22">
                <span class="font_13 text_39">下一页</span>
                <img
                  class="image_15 image_16"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/636865bd5a7e3f031068e73c/636867f5f9b4a40011de0637/16678389158284507749.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      components: {},
      data() {
        return {
          tenantAmount: '985',
          userAmount: '100293',
          questionnaireAmount: '2040',
          salesAmount: '89,000',
        };
      },
      methods: {},
    };
  </script>
  
  <style scoped lang="css">
    .page {
      padding-top: 3px;
      border: solid 1px rgb(14, 15, 31);
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }
    .section {
      padding: 17px 59px 31px 68px;
      background-color: rgb(249, 249, 249);
      border-radius: 2px;
    }
    .space-y-8 > *:not(:first-child) {
      margin-top: 8px;
    }
    .group_4 {
      margin-top: 23px;
    }
    .text_3 {
      margin-left: 16px;
      color: rgb(15, 30, 36);
      font-size: 34px;
      font-family: Nunito;
      font-weight: 900;
      line-height: 24.5px;
    }
    .text_8 {
      color: rgb(108, 144, 159);
      font-size: 14px;
      font-family: Nunito;
      line-height: 12.5px;
    }
    .space-x-71 > *:not(:first-child) {
      margin-left: 71px;
    }
    .section_2 {
      align-self: center;
      background-color: rgb(240, 244, 245);
      border-radius: 49px;
      width: 234px;
      height: 56px;
    }
    .section_3 {
      padding: 14px 0 19px;
      background-color: rgb(30, 170, 231);
      border-radius: 49px;
      width: 112px;
      height: 56px;
      position: relative;
    }
    .group_5 {
      width: 69px;
    }
    .section_4 {
      align-self: flex-end;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      border: solid 2px rgb(255, 255, 255);
    }
    .image_3 {
      align-self: flex-start;
      width: 28px;
      height: 18px;
    }
    .text_4 {
      color: rgb(255, 255, 255);
      font-size: 22px;
      font-family: Poppins;
      font-weight: 600;
      line-height: 16.5px;
      position: absolute;
      right: 34px;
      top: 50%;
      transform: translateY(-50%);
    }
    .font_2 {
      font-size: 14px;
      font-family: Poppins;
      line-height: 12px;
      font-weight: 600;
      color: rgb(66, 66, 66);
    }
    .text_5 {
      margin-left: 22px;
      align-self: center;
      line-height: 13px;
    }
    .text_6 {
      margin-left: 16px;
      align-self: center;
      line-height: 13px;
    }
    .group {
      padding-top: 5px;
      width: 64px;
      position: relative;
    }
    .view_2 {
      margin: 6px 0 5px;
    }
    .image_2 {
      border-radius: 49px;
      width: 56px;
      height: 56px;
    }
    .text-wrapper_2 {
      padding: 8px 0;
      background-color: rgb(30, 170, 231);
      box-shadow: 0px 6px 8px rgba(43, 152, 214, 0.26);
      border-radius: 50%;
      width: 26px;
      position: absolute;
      right: 0;
      top: 0;
    }
    .font_1 {
      font-size: 14px;
      font-family: Poppins;
      line-height: 10px;
      font-weight: 600;
      color: rgb(255, 255, 255);
    }
    .group_2 {
      margin-left: 40px;
      margin-top: 11px;
      padding-top: 5px;
      width: 66px;
      position: relative;
    }
    .space-y-13 > *:not(:first-child) {
      margin-top: 13px;
    }
    .group_3 {
      margin-left: 44px;
      align-self: center;
    }
    .text_2 {
      color: rgb(0, 0, 0);
      font-size: 16px;
      font-family: Poppins;
      line-height: 15.5px;
    }
    .text_7 {
      margin-right: 3px;
      color: rgb(143, 143, 143);
      font-size: 12px;
      font-family: Poppins;
      line-height: 11px;
    }
    .image {
      margin-left: 30px;
      align-self: center;
      width: 61px;
      height: 54px;
    }
    .view {
      margin-left: 40px;
    }
    .text-wrapper {
      padding: 8px 0;
      background-color: rgb(255, 75, 75);
      box-shadow: 0px 6px 8px rgba(255, 46, 46, 0.22);
      border-radius: 50%;
      width: 26px;
      position: absolute;
      right: 0;
      top: 0;
    }
    .text {
      line-height: 10.5px;
    }
    .space-y-560 > *:not(:first-child) {
      margin-top: 560px;
    }
    .section_5 {
      padding: 39px 0 48px;
      flex-shrink: 0;
      background-color: rgb(249, 249, 249);
      border-radius: 2px;
      height: 824px;
    }
    .section_6 {
      padding: 23px 70px;
      background-color: rgb(249, 249, 249);
    }
    .image_4 {
      flex-shrink: 0;
      width: 32px;
      height: 34px;
    }
    .font_4 {
      font-size: 18px;
      font-family: Poppins;
      line-height: 17px;
      color: rgb(191, 191, 191);
    }
    .text_12 {
      margin: 8px 22px;
    }
    .section_12 {
      margin-right: 8px;
      padding: 30px 67px 29px;
      background-color: rgb(249, 249, 249);
    }
    .image_10 {
      flex-shrink: 0;
      width: 32px;
      height: 21px;
    }
    .text_18 {
      margin: 0 20px 2px 22px;
    }
    .text_36 {
      align-self: center;
    }
    .group_6 {
      padding: 68px 21px 20px 45px;
      flex: 1 1 auto;
    }
    .group_7 {
      margin-left: 16px;
      align-self: flex-start;
      width: 836px;
    }
    .font_3 {
      font-size: 16px;
      font-family: NunitoSans;
      line-height: 15.5px;
      font-weight: 600;
      color: rgb(32, 34, 36);
    }
    .text_9 {
      line-height: 15px;
      opacity: 0.7;
    }
    .text_10 {
      margin-bottom: 5px;
    }
    .text_11 {
      margin-bottom: 5px;
    }
    .text_13 {
      margin: 2px 0 3px;
    }
    .text_14 {
      margin-top: 5px;
    }
    .group_8 {
      margin-top: 8px;
    }
    .group_9 {
      height: 260px;
      border-bottom: solid 1px rgb(233, 236, 255);
      position: relative;
    }
    .space-y-12 > *:not(:first-child) {
      margin-top: 12px;
    }
    .section_7 {
      padding: 15px 16px 0;
      background-color: rgb(255, 255, 255);
      border-radius: 14px;
      box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.05);
      width: 234px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .font_5 {
      font-size: 28px;
      font-family: NunitoSans;
      line-height: 23.5px;
      font-weight: 700;
      color: rgb(32, 34, 36);
    }
    .image_5 {
      width: 53px;
      height: 53px;
    }
    .font_7 {
      font-size: 16px;
      font-family: NunitoSans;
      line-height: 15.5px;
      font-weight: 600;
      color: rgb(0, 182, 155);
    }
    .text_20 {
      align-self: center;
      line-height: 15px;
    }
    .image_11 {
      align-self: flex-start;
      width: 24px;
      height: 21px;
    }
    .space-y-11 > *:not(:first-child) {
      margin-top: 11px;
    }
    .section_8 {
      padding: 12px 16px 5px 18px;
      background-color: rgb(255, 255, 255);
      border-radius: 14px;
      box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.05);
      width: 234px;
      position: absolute;
      left: 260px;
      top: 3px;
    }
    .group_10 {
      padding-left: 2px;
    }
    .font_6 {
      font-size: 28px;
      font-family: NunitoSans;
      line-height: 20px;
      font-weight: 700;
      color: rgb(32, 34, 36);
    }
    .image_6 {
      width: 53px;
      height: 52px;
    }
    .text_19 {
      align-self: center;
      line-height: 15px;
    }
    .section_9 {
      padding: 14px 14px 0 16px;
      background-color: rgb(255, 255, 255);
      border-radius: 14px;
      box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.05);
      width: 225px;
      position: absolute;
      left: 519px;
      top: 0;
    }
    .space-x-6 > *:not(:first-child) {
      margin-left: 6px;
    }
    .space-y-38 > *:not(:first-child) {
      margin-top: 38px;
    }
    .group_11 {
      margin-top: 2px;
      flex: 1 1 auto;
      width: 137.5px;
    }
    .text_15 {
      align-self: flex-start;
    }
    .text_21 {
      align-self: center;
      color: rgb(249, 60, 101);
      line-height: 15px;
    }
    .image_7 {
      width: 52px;
      height: 64.5px;
    }
    .section_10 {
      padding: 14px 14px 0 16px;
      background-color: rgb(255, 255, 255);
      border-radius: 14px;
      box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.05);
      width: 222px;
      position: absolute;
      right: 382px;
      top: 4px;
    }
    .text_16 {
      margin-top: 3px;
    }
    .image_8 {
      width: 51px;
      height: 52px;
    }
    .text_22 {
      align-self: center;
      line-height: 15px;
    }
    .section_11 {
      padding: 20px 20px;
      background-color: rgb(255, 255, 255);
      border-radius: 12px;
      width: 311px;
      position: absolute;
      right: 46px;
      top: 6px;
    }
    .image_9 {
      width: 17px;
      height: 18px;
    }
    .text_17 {
      margin: 2px 0 3px 10px;
      color: rgb(127, 133, 162);
      font-size: 14px;
      font-family: HarmonyOSSansSC;
      line-height: 13px;
    }
    .group_12 {
      height: 183px;
      position: absolute;
      left: 0;
      right: 3px;
      top: 77px;
    }
    .section_14 {
      margin-top: 97px;
      padding: 30px 64px 36px 84px;
      background-color: rgb(255, 255, 255);
      border-radius: 20px 20px 0px 0px;
    }
    .space-x-12 > *:not(:first-child) {
      margin-left: 12px;
    }
    .font_9 {
      font-size: 18px;
      font-family: Poppins;
      line-height: 17px;
      color: rgb(0, 0, 0);
    }
    .image_14 {
      flex-shrink: 0;
      width: 11px;
      height: 18px;
    }
    .space-x-10 > *:not(:first-child) {
      margin-left: 10px;
    }
    .group_14 {
      margin-left: 130px;
    }
    .space-x-18 > *:not(:first-child) {
      margin-left: 18px;
    }
    .group_15 {
      margin-left: 137px;
    }
    .text_24 {
      margin-bottom: 2px;
    }
    .group_16 {
      margin-left: 160px;
    }
    .space-x-14 > *:not(:first-child) {
      margin-left: 14px;
    }
    .group_17 {
      margin-left: 150px;
    }
    .text-wrapper_3 {
      margin-right: 43px;
      margin-top: -183px;
      padding: 16px 0 24px;
      align-self: flex-end;
      background-color: rgb(255, 255, 255);
      border-radius: 12px;
      box-shadow: 0px 6px 24px rgba(53, 55, 81, 0.06);
      width: 311px;
      position: relative;
    }
    .font_8 {
      font-size: 18px;
      font-family: Poppins;
      line-height: 17px;
      color: rgb(46, 46, 46);
    }
    .section_13 {
      padding: 54px 75px 0;
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 2px;
      box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
      width: 311px;
      position: absolute;
      right: 43px;
      top: 15px;
    }
    .group_13 {
      padding: 4px 3px 6px;
      position: relative;
    }
    .image_12 {
      position: absolute;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      width: 27px;
      height: 26px;
    }
    .image_13 {
      width: 33px;
      height: 33px;
    }
    .text_23 {
      align-self: center;
    }
    .section_15 {
      margin-right: 3px;
      padding: 27px 54px 29px 74px;
      background-color: rgb(255, 255, 255);
      border-bottom: solid 1px rgb(233, 236, 255);
    }
    .space-x-161 > *:not(:first-child) {
      margin-left: 161px;
    }
    .font_12 {
      font-size: 16px;
      font-family: Poppins;
      line-height: 12px;
      color: rgb(62, 73, 84);
    }
    .text_25 {
      margin-top: 4px;
    }
    .text_26 {
      margin-top: 4px;
      line-height: 11.5px;
    }
    .font_10 {
      font-size: 16px;
      font-family: Poppins;
      line-height: 15.5px;
      font-weight: 600;
      color: rgb(62, 73, 84);
    }
    .space-x-168 > *:not(:first-child) {
      margin-left: 168px;
    }
    .space-x-134 > *:not(:first-child) {
      margin-left: 134px;
    }
    .group_18 {
      flex-shrink: 0;
    }
    .font_11 {
      font-size: 16px;
      font-family: Poppins;
      line-height: 15.5px;
      font-weight: 600;
      color: rgb(82, 177, 65);
    }
    .section_16 {
      margin-right: 3px;
      padding: 27px 52px 30px 72px;
      background-color: rgb(255, 255, 255);
      border-bottom: solid 1px rgb(233, 236, 255);
    }
    .space-x-159 > *:not(:first-child) {
      margin-left: 159px;
    }
    .text_27 {
      margin-bottom: 2px;
    }
    .text_28 {
      margin-bottom: 3px;
    }
    .space-x-163 > *:not(:first-child) {
      margin-left: 163px;
    }
    .space-x-130 > *:not(:first-child) {
      margin-left: 130px;
    }
    .group_19 {
      flex-shrink: 0;
    }
    .section_17 {
      margin-right: 3px;
      padding: 27px 56px 30px 72px;
      background-color: rgb(255, 255, 255);
      border-bottom: solid 1px rgb(233, 236, 255);
    }
    .text_29 {
      margin-bottom: 2px;
    }
    .text_31 {
      margin-left: 156px;
      margin-top: 4px;
      line-height: 11.5px;
    }
    .text_30 {
      margin-left: 164px;
    }
    .space-x-167 > *:not(:first-child) {
      margin-left: 167px;
    }
    .group_20 {
      flex-shrink: 0;
    }
    .section_18 {
      margin-right: 3px;
      padding: 27px 56px 30px 72px;
      background-color: rgb(255, 255, 255);
    }
    .text_32 {
      margin-bottom: 3px;
    }
    .text_33 {
      margin-top: 4px;
      line-height: 11.5px;
    }
    .space-x-164 > *:not(:first-child) {
      margin-left: 164px;
    }
    .group_21 {
      flex-shrink: 0;
    }
    .section_19 {
      padding: 26px 58px 30px 72px;
      background-color: rgb(255, 255, 255);
      border-top: solid 1px rgb(233, 236, 255);
      border-bottom: solid 1px rgb(233, 236, 255);
    }
    .space-x-153 > *:not(:first-child) {
      margin-left: 153px;
    }
    .text_34 {
      margin-bottom: 2px;
    }
    .text_35 {
      margin-top: 4px;
      line-height: 11.5px;
    }
    .group_22 {
      flex-shrink: 0;
    }
    .group_23 {
      padding: 18px 0 7px;
      border-bottom: solid 1px rgb(233, 236, 255);
    }
    .text_38 {
      align-self: center;
      line-height: 15px;
      font-weight: unset;
    }
    .space-x-17 > *:not(:first-child) {
      margin-left: 17px;
    }
    .section_20 {
      padding: 12px 24px 14px;
      border-radius: 12px;
      width: 162px;
      height: 53px;
      border: solid 1px rgb(82, 177, 65);
    }
    .image_15 {
      width: 24px;
      height: 24px;
    }
    .text_37 {
      margin: 2px 0 5px 11px;
      color: rgb(82, 177, 65);
    }
    .section_21 {
      padding: 0 28px;
      background-color: rgba(82, 177, 65, 0.15);
      border-radius: 12px;
      height: 53px;
    }
    .font_13 {
      font-size: 18px;
      font-family: Poppins;
      line-height: 12px;
      color: rgb(82, 177, 65);
    }
    .text_40 {
      align-self: center;
      line-height: 12.5px;
    }
    .text_41 {
      margin-left: 34px;
      align-self: center;
      line-height: 13px;
    }
    .text-wrapper_4 {
      margin-left: 28px;
      padding: 19px 0 21px;
      flex-shrink: 0;
      background-color: rgb(82, 177, 65);
      border-radius: 12px;
      width: 62px;
      height: 53px;
    }
    .text_42 {
      color: rgb(253, 253, 253);
      line-height: 13px;
    }
    .text_43 {
      margin-left: 20px;
      align-self: center;
      line-height: 13px;
    }
    .section_22 {
      padding: 12px 20px 14px;
      border-radius: 12px;
      height: 53px;
      border: solid 1px rgb(82, 177, 65);
    }
    .text_39 {
      margin: 3px 0 5px;
      line-height: 16px;
    }
    .image_16 {
      flex-shrink: 0;
    }


    html {
        font-size: 16px;
      }
    
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
      }
    
      body * {
        box-sizing: border-box;
        flex-shrink: 0;
      }
    
      #app {
        width: 100vw;
        height: 100vh;
      }
    
      .flex-row {
        display: flex;
        flex-direction: row;
      }
    
      .flex-col {
        display: flex;
        flex-direction: column;
      }
    
      .justify-start {
        justify-content: flex-start;
      }
    
      .justify-center {
        justify-content: center;
      }
    
      .justify-end {
        justify-content: flex-end;
      }
    
      .justify-evenly {
        justify-content: space-evenly;
      }
    
      .justify-around {
        justify-content: space-around;
      }
    
      .justify-between {
        justify-content: space-between;
      }
    
      .items-start {
        align-items: flex-start;
      }
    
      .items-center {
        align-items: center;
      }
    
      .items-end {
        align-items: flex-end;
      }
  </style>